<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Navigation from '@/components/Navigation.vue'

import { ExternalLink, Github, Calendar, Tag, ArrowLeft } from 'lucide-vue-next'
import AOS from 'aos'
import 'aos/dist/aos.css'

// 项目分类
const categories = ['全部', '网站开发', '移动应用', 'UI设计']
const activeCategory = ref('全部')

// 选中的项目详情
const selectedProject = ref<Project | null>(null)

// 项目数据类型定义
interface Project {
  id: number
  title: string
  description: string
  category: string
  image: string
  technologies: string[]
  date: string
  status: string
  details: {
    overview: string
    challenge: string
    solution: string
    result: string
  }
  links?: {
    demo?: string
    github?: string
  }
}

// 项目数据
const projects: Project[] = [
  {
    id: 1,
    title: '企业官网重构',
    description: '为某科技公司打造的现代化企业官网，采用响应式设计和先进的前端技术栈',
    category: '网站开发',
    image:
      'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20corporate%20website%20design%20with%20clean%20layout%20and%20professional%20appearance&image_size=landscape_16_9',
    technologies: ['Vue.js', 'TypeScript', 'Tailwind CSS', 'Vite'],
    date: '2024-01',
    status: '已完成',
    details: {
      overview: '该项目是为一家科技公司重新设计和开发的企业官网，旨在提升品牌形象和用户体验。',
      challenge: '原有网站设计过时，用户体验差，移动端适配不佳，加载速度慢。',
      solution: '采用现代化的设计语言，使用Vue.js构建SPA应用，实现响应式布局和性能优化。',
      result: '网站访问量提升40%，用户停留时间增加60%，移动端用户体验显著改善。'
    },
    links: {
      demo: '',
      github: ''
    }
  },
  {
    id: 2,
    title: '智能记账APP',
    description: '一款功能丰富的个人财务管理移动应用，支持多账户管理和智能分析',
    category: '移动应用',
    image:
      'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=mobile%20finance%20app%20interface%20with%20charts%20and%20modern%20ui%20design&image_size=portrait_4_3',
    technologies: ['React Native', 'Redux', 'Chart.js', 'SQLite'],
    date: '2023-12',
    status: '已完成',
    details: {
      overview: '为用户提供便捷的个人财务管理解决方案，帮助用户更好地管理收支和理财规划。',
      challenge: '需要处理复杂的财务数据，确保数据安全性，同时提供直观的数据可视化。',
      solution:
        '采用React Native开发跨平台应用，集成图表库实现数据可视化，使用加密技术保护用户数据。',
      result: 'App Store评分4.8分，下载量超过10万次，用户活跃度持续增长。'
    }
  },
  {
    id: 3,
    title: '电商平台UI设计',
    description: '为新兴电商平台设计的完整UI界面，注重用户体验和转化率优化',
    category: 'UI设计',
    image:
      'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=ecommerce%20platform%20ui%20design%20with%20product%20cards%20and%20shopping%20interface&image_size=landscape_4_3',
    technologies: ['Figma', 'Adobe XD', 'Principle', 'Sketch'],
    date: '2023-11',
    status: '已完成',
    details: {
      overview: '为电商平台设计完整的用户界面，包括商品展示、购物流程、用户中心等核心功能。',
      challenge: '需要在有限的屏幕空间内展示大量商品信息，同时保持界面简洁和用户友好。',
      solution: '采用卡片式设计，优化信息层级，设计直观的购物流程，提升用户转化率。',
      result: '用户转化率提升25%，购物车放弃率降低30%，用户满意度显著提升。'
    }
  },
  {
    id: 4,
    title: '在线教育平台',
    description: '功能完善的在线学习平台，支持视频课程、在线考试和学习进度跟踪',
    category: '网站开发',
    image:
      'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=online%20education%20platform%20interface%20with%20video%20player%20and%20course%20layout&image_size=landscape_16_9',
    technologies: ['React', 'Node.js', 'MongoDB', 'WebRTC'],
    date: '2023-10',
    status: '进行中',
    details: {
      overview: '构建一个完整的在线教育生态系统，为教师和学生提供优质的在线学习体验。',
      challenge: '需要处理大量视频内容，确保流畅的视频播放体验，同时支持实时互动功能。',
      solution: '采用CDN加速视频传输，集成WebRTC实现实时通信，使用微服务架构确保系统稳定性。',
      result: '平台注册用户超过5万人，课程完成率达到85%，获得用户一致好评。'
    }
  }
]

// 过滤后的项目列表
const filteredProjects = ref<Project[]>(projects)

/**
 * 切换项目分类
 */
const setActiveCategory = (category: string) => {
  activeCategory.value = category
  if (category === '全部') {
    filteredProjects.value = projects
  } else {
    filteredProjects.value = projects.filter(project => project.category === category)
  }
}

/**
 * 显示项目详情
 */
const showProjectDetails = (project: Project) => {
  selectedProject.value = project
  document.body.style.overflow = 'hidden'
}

/**
 * 关闭项目详情
 */
const closeProjectDetails = () => {
  selectedProject.value = null
  document.body.style.overflow = 'auto'
}

/**
 * 获取状态颜色
 */
const getStatusColor = (status: string) => {
  switch (status) {
    case '已完成':
      return 'bg-green-400/20 text-green-400 border-green-400/30'
    case '进行中':
      return 'bg-yellow-400/20 text-yellow-400 border-yellow-400/30'
    default:
      return 'bg-gray-400/20 text-gray-400 border-gray-400/30'
  }
}

onMounted(() => {
  // 初始化AOS动画库
  AOS.init({
    duration: 600,
    easing: 'ease-out-cubic',
    once: true,
    offset: 100
  })
})
</script>

<template>
  <div
    class="min-h-screen relative bg-white dark:bg-black text-gray-900 dark:text-white transition-colors duration-300"
  >
    <!-- 导航栏 -->
    <Navigation />

    <!-- 页面头部 -->
    <section
      class="pt-24 pb-12 bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 dark:from-black dark:via-gray-900 dark:to-black relative overflow-hidden"
    >
      <!-- 科技感背景装饰 -->
      <div class="absolute inset-0 bg-cyber-grid opacity-10" />
      <div
        class="absolute top-10 left-10 w-32 h-32 bg-primary-400/20 rounded-full blur-3xl animate-pulse-slow"
      />
      <div
        class="absolute bottom-10 right-10 w-40 h-40 bg-accent-400/20 rounded-full blur-3xl animate-float"
      />
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div data-aos="fade-up">
          <h1 class="text-4xl lg:text-6xl font-bold mb-6">
            我们的
            <span class="gradient-text">作品展示</span>
          </h1>
          <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
            每一个项目都是我们技术实力和创意思维的体现， 见证我们与客户共同创造的数字化成果
          </p>
        </div>
      </div>
    </section>

    <!-- 分类筛选 -->
    <section class="py-8 bg-gray-100/50 dark:bg-gray-900/30 backdrop-blur-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          class="flex flex-wrap justify-center gap-4"
          data-aos="fade-up"
        >
          <button
            v-for="category in categories"
            :key="category"
            :class="[
              'px-6 py-3 rounded-full font-medium transition-all duration-300 glow-effect',
              activeCategory === category
                ? 'bg-primary-500 text-white shadow-lg shadow-primary-500/25'
                : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white'
            ]"
            @click="setActiveCategory(category)"
          >
            {{ category }}
          </button>
        </div>
      </div>
    </section>

    <!-- 项目网格 -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="(project, index) in filteredProjects"
            :key="project.id"
            class="group cursor-pointer"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
            @click="showProjectDetails(project)"
          >
            <div
              class="bg-white/80 dark:bg-gray-900/50 rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 hover:border-primary-400/50 transition-all duration-300 hover:transform hover:scale-105 backdrop-blur-sm shadow-lg hover:shadow-xl hover:shadow-primary-500/10"
            >
              <!-- 项目图片 -->
              <div class="relative overflow-hidden">
                <img
                  :src="project.image"
                  :alt="project.title"
                  class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500"
                />
                <div
                  class="absolute inset-0 bg-black/40 dark:bg-black/40 group-hover:bg-black/20 dark:group-hover:bg-black/20 transition-colors duration-300"
                />

                <!-- 状态标签 -->
                <div class="absolute top-4 right-4">
                  <span
                    :class="[
                      'px-3 py-1 rounded-full text-xs font-medium border',
                      getStatusColor(project.status)
                    ]"
                  >
                    {{ project.status }}
                  </span>
                </div>
              </div>

              <!-- 项目信息 -->
              <div class="p-6">
                <div class="flex items-center justify-between mb-3">
                  <span class="text-sm text-primary-500 font-medium">{{ project.category }}</span>
                  <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                    <Calendar class="w-4 h-4 mr-1" />
                    {{ project.date }}
                  </div>
                </div>

                <h3 class="text-xl font-bold mb-3 group-hover:text-primary-500 transition-colors">
                  {{ project.title }}
                </h3>

                <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">
                  {{ project.description }}
                </p>

                <!-- 技术栈 -->
                <div class="flex flex-wrap gap-2">
                  <span
                    v-for="tech in project.technologies.slice(0, 3)"
                    :key="tech"
                    class="px-2 py-1 bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs rounded-md"
                  >
                    {{ tech }}
                  </span>
                  <span
                    v-if="project.technologies.length > 3"
                    class="px-2 py-1 bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-md"
                  >
                    +{{ project.technologies.length - 3 }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 项目详情模态框 -->
    <div
      v-if="selectedProject"
      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 dark:bg-black/80 backdrop-blur-sm"
      @click="closeProjectDetails"
    >
      <div
        class="bg-white dark:bg-gray-900 rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-gray-200 dark:border-gray-700 shadow-2xl"
        @click.stop
      >
        <!-- 模态框头部 -->
        <div
          class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-6 flex items-center justify-between backdrop-blur-sm"
        >
          <h2 class="text-2xl font-bold">
            {{ selectedProject.title }}
          </h2>
          <button
            class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
            @click="closeProjectDetails"
          >
            <ArrowLeft class="w-6 h-6" />
          </button>
        </div>

        <!-- 模态框内容 -->
        <div class="p-6">
          <!-- 项目图片 -->
          <div class="mb-8">
            <img
              :src="selectedProject.image"
              :alt="selectedProject.title"
              class="w-full h-64 object-cover rounded-xl"
            />
          </div>

          <!-- 项目基本信息 -->
          <div class="grid md:grid-cols-2 gap-8 mb-8">
            <div>
              <h3 class="text-lg font-semibold mb-4 text-primary-500">项目信息</h3>
              <div class="space-y-3">
                <div class="flex items-center">
                  <Tag class="w-4 h-4 mr-2 text-gray-400" />
                  <span class="text-gray-700 dark:text-gray-300">{{
                    selectedProject.category
                  }}</span>
                </div>
                <div class="flex items-center">
                  <Calendar class="w-4 h-4 mr-2 text-gray-400" />
                  <span class="text-gray-700 dark:text-gray-300">{{ selectedProject.date }}</span>
                </div>
                <div class="flex items-center">
                  <span
                    :class="[
                      'px-3 py-1 rounded-full text-xs font-medium border',
                      getStatusColor(selectedProject.status)
                    ]"
                  >
                    {{ selectedProject.status }}
                  </span>
                </div>
              </div>
            </div>

            <div>
              <h3 class="text-lg font-semibold mb-4 text-primary-500">技术栈</h3>
              <div class="flex flex-wrap gap-2">
                <span
                  v-for="tech in selectedProject.technologies"
                  :key="tech"
                  class="px-3 py-1 bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm rounded-md"
                >
                  {{ tech }}
                </span>
              </div>
            </div>
          </div>

          <!-- 项目详情 -->
          <div class="space-y-6">
            <div>
              <h3 class="text-lg font-semibold mb-3 text-primary-500">项目概述</h3>
              <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
                {{ selectedProject.details.overview }}
              </p>
            </div>

            <div>
              <h3 class="text-lg font-semibold mb-3 text-primary-500">面临挑战</h3>
              <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
                {{ selectedProject.details.challenge }}
              </p>
            </div>

            <div>
              <h3 class="text-lg font-semibold mb-3 text-primary-500">解决方案</h3>
              <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
                {{ selectedProject.details.solution }}
              </p>
            </div>

            <div>
              <h3 class="text-lg font-semibold mb-3 text-primary-500">项目成果</h3>
              <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
                {{ selectedProject.details.result }}
              </p>
            </div>
          </div>

          <!-- 项目链接 -->
          <div
            v-if="selectedProject.links"
            class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700"
          >
            <h3 class="text-lg font-semibold mb-4 text-primary-500">相关链接</h3>
            <div class="flex gap-4">
              <a
                v-if="selectedProject.links.demo"
                :href="selectedProject.links.demo"
                target="_blank"
                class="flex items-center gap-2 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-colors glow-effect"
              >
                <ExternalLink class="w-4 h-4" />
                查看演示
              </a>
              <a
                v-if="selectedProject.links.github"
                :href="selectedProject.links.github"
                target="_blank"
                class="flex items-center gap-2 bg-gray-600 dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
              >
                <Github class="w-4 h-4" />
                源代码
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
